import React from 'react';
import {
    LineChart, Line, PieChart, Pie, BarChart, Bar,
    XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Cell,
    RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis
} from 'recharts';

const contentTypeNameMap = {
    text: '纯文本',
    imageText: '图文',
    video: '视频'
};

// 合并后的趋势数据数组
const combinedTrendData = [
    { date: '12/11', retention: 5800, userActivity: 2800, consumptior: 1200, volume: 5200 },
    { date: '12/12', retention: 5850, userActivity: 2850, consumptior: 1250, volume: 5250 },
    { date: '12/13', retention: 5880, userActivity: 2880, consumptior: 1280, volume: 5280 },
    { date: '12/14', retention: 5900, userActivity: 2900, consumptior: 1300, volume: 5300 },
    { date: '12/15', retention: 5920, userActivity: 2920, consumptior: 1320, volume: 5320 },
    { date: '12/16', retention: 5950, userActivity: 2930, consumptior: 1350, volume: 5350 },
    { date: '12/17', retention: 5982, userActivity: 2942, consumptior: 1382, volume: 5382 },
];

// 内容类型分析数据
const contentTypeAnalysisData = [
    { name: 'text', value: 43 },    // 纯文本占比43%
    { name: 'book', value: 24 },    // 图书类占比24%
    { name: 'video', value: 21 },   // 视频类占比21%
    { name: 'other', value: 12 },   // 其他占比12%
];

// 颜色标签配置
const COLOR_LABELS = [
    { name: '纯文本', color: '#8884d8' },
    { name: '图书类', color: '#82ca9d' },
    { name: '视频类', color: '#ffc658' },
    { name: '其他', color: '#ff8042' },
];

// 颜色数组
const COLORS = COLOR_LABELS.map(label => label.color);

// 雷达图模拟数据
const radarData = [
    { subject: '纯文本', A: 120, fullMark: 150 },
    { subject: '图书类', A: 98, fullMark: 150 },
    { subject: '视频类', A: 86, fullMark: 150 },
    { subject: '图文类', A: 99, fullMark: 150 },
    { subject: '音频类', A: 85, fullMark: 150 },
    { subject: '其他', A: 65, fullMark: 150 },
];

const About: React.FC = () => {
    return (
        <div style={{
            padding: '20px',
            backgroundColor: '#f5f5f5',
            minHeight: '100vh'
        }}>
            <h1 style={{
                textAlign: 'center',
                marginBottom: '30px',
                color: '#333'
            }}>数据分析概览</h1>

            {/* 顶部四个指标卡片 */}
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(4, 1fr)',
                gap: '20px',
                marginBottom: '30px'
            }}>
                {/* 用户留存趋势 */}
                <div style={{
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                }}>
                    <h3>用户留存趋势</h3>
                    <p style={{
                        fontSize: '24px',
                        fontWeight: 'bold',
                        color: '#333',
                        margin: '10px 0'
                    }}>5,982 <span style={{
                        fontSize: '14px',
                        color: 'green',
                        fontWeight: 'normal'
                    }}>↑ 3.42%</span></p>
                    <ResponsiveContainer width="100%" height={150}>
                        <LineChart data={combinedTrendData} margin={{
                            top: 5, right: 5, left: 5, bottom: 5
                        }}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
                            <XAxis dataKey="date" tick={{ fontSize: 12 }} axisLine={false} tickLine={false} />
                            <YAxis hide={true} />
                            <Tooltip />
                            <Line type="monotone" dataKey="retention" stroke="#3498db" strokeWidth={2} dot={false} />
                        </LineChart>
                    </ResponsiveContainer>
                </div>

                {/* 用户活跃度 */}
                <div style={{
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                }}>
                    <h3>用户活跃度</h3>
                    <p style={{
                        fontSize: '24px',
                        fontWeight: 'bold',
                        color: '#333',
                        margin: '10px 0'
                    }}>2,942 <span style={{
                        fontSize: '14px',
                        color: 'green',
                        fontWeight: 'normal'
                    }}>↑ 206</span></p>
                    <ResponsiveContainer width="100%" height={150}>
                        <BarChart data={combinedTrendData} margin={{
                            top: 5, right: 5, left: 5, bottom: 5
                        }}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
                            <XAxis dataKey="date" tick={{ fontSize: 12 }} axisLine={false} tickLine={false} />
                            <YAxis hide={true} />
                            <Tooltip />
                            <Bar dataKey="userActivity" fill="#2ecc71" radius={[4, 4, 0, 0]} />
                        </BarChart>
                    </ResponsiveContainer>
                </div>

                {/* 内容消费趋势 */}
                <div style={{
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                }}>
                    <h3>内容消费趋势</h3>
                    <p style={{
                        fontSize: '24px',
                        fontWeight: 'bold',
                        color: '#333',
                        margin: '10px 0'
                    }}>1,382 <span style={{
                        fontSize: '14px',
                        color: 'green',
                        fontWeight: 'normal'
                    }}>↑ 28%</span></p>
                    <ResponsiveContainer width="100%" height={150}>
                        <LineChart data={combinedTrendData} margin={{
                            top: 5, right: 5, left: 5, bottom: 5
                        }}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
                            <XAxis dataKey="date" tick={{ fontSize: 12 }} axisLine={false} tickLine={false} />
                            <YAxis hide={true} />
                            <Tooltip />
                            <Line type="monotone" dataKey="consumptior" stroke="#9b59b6" strokeWidth={2} dot={false} />
                        </LineChart>
                    </ResponsiveContainer>
                </div>

                {/* 内容量 */}
                <div style={{
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
                }}>
                    <h3>内容量</h3>
                    <p style={{
                        fontSize: '24px',
                        fontWeight: 'bold',
                        color: '#333',
                        margin: '10px 0'
                    }}>5,382 <span style={{
                        fontSize: '14px',
                        color: 'green',
                        fontWeight: 'normal'
                    }}>↑ 22</span></p>
                    <ResponsiveContainer width="100%" height={150}>
                        <BarChart data={combinedTrendData} margin={{
                            top: 5, right: 5, left: 5, bottom: 5
                        }}>
                            <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
                            <XAxis dataKey="date" tick={{ fontSize: 12 }} axisLine={false} tickLine={false} />
                            <YAxis hide={true} />
                            <Tooltip />
                            <Bar dataKey="volume" fill="#1abc9c" radius={[4, 4, 0, 0]} />
                        </BarChart>
                    </ResponsiveContainer>
                </div>
            </div>

      {/* 新增雷达图 */}
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
        marginBottom: '30px'
      }}>
        <h3>内容类型分布雷达图</h3>
        <ResponsiveContainer width="100%" height={400}>
          <RadarChart cx="50%" cy="50%" outerRadius="80%" data={radarData}>
            <PolarGrid stroke="#e0e0e0" />
            <PolarAngleAxis dataKey="subject" tick={{ fontSize: 12 }} />
            <PolarRadiusAxis angle={30} domain={[0, 150]} tick={{ fontSize: 10 }} />
            <Radar
              name="内容占比"
              dataKey="A"
              stroke={COLORS[0]}
              fill={COLORS[0]}
              fillOpacity={0.6}
            />
            <Tooltip formatter={(value) => [`${value}`, '数量']} />
            <Legend />
          </RadarChart>
        </ResponsiveContainer>
      </div>

      {/* 内容类型分析 - 三个饼图 */}
      <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: '20px'
      }}>
                {/* 纯文本分析 */}
                <div style={{
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                    textAlign: 'center'
                }}>
                    <h3>纯文本分析</h3>
                    <ResponsiveContainer width="100%" height={200}>
                        <PieChart>
                            <Pie
                                data={contentTypeAnalysisData}
                                cx="50%"
                                cy="50%"
                                innerRadius={50}
                                outerRadius={70}
                                paddingAngle={2}
                                dataKey="value"
                                label={({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%`}
                            >
                                {contentTypeAnalysisData.map((_entry, index) => (
                                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                ))}
                            </Pie>
                            <Tooltip formatter={(value, name) => {
                                const displayName = contentTypeNameMap[name as keyof typeof contentTypeNameMap] || name;
                                return [`${value}%`, displayName];
                            }} />
                        </PieChart>
                    </ResponsiveContainer>
                    <div style={{
                        display: 'flex',
                        justifyContent: 'center',
                        marginTop: '10px',
                        gap: '15px'
                    }}>
                        {COLOR_LABELS.map((label, index) => (
                            <div key={index} style={{
                                display: 'flex',
                                alignItems: 'center',
                                fontSize: '12px'
                            }}>
                                <div style={{
                                    width: '12px',
                                    height: '12px',
                                    backgroundColor: label.color,
                                    marginRight: '5px',
                                    borderRadius: '50%'
                                }}></div>
                                <span>{label.name}</span>
                            </div>
                        ))}
                    </div>
                </div>

                {/* 图书类分析 */}
                <div style={{
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                    textAlign: 'center'
                }}>
                    <h3>图文类分析</h3>
                    <ResponsiveContainer width="100%" height={200}>
                        <PieChart>
                            <Pie
                                data={contentTypeAnalysisData}
                                cx="50%"
                                cy="50%"
                                innerRadius={50}
                                outerRadius={70}
                                paddingAngle={2}
                                dataKey="value"
                                label={({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%`}
                            >
                                {contentTypeAnalysisData.map((_entry, index) => (
                                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                ))}
                            </Pie>
                            <Tooltip formatter={(value, name) => {
                                const displayName = contentTypeNameMap[name as keyof typeof contentTypeNameMap] || name;
                                return [`${value}%`, displayName];
                            }} />
                        </PieChart>
                    </ResponsiveContainer>
                    <div style={{
                        display: 'flex',
                        justifyContent: 'center',
                        marginTop: '10px',
                        gap: '15px'
                    }}>
                        {COLOR_LABELS.map((label, index) => (
                            <div key={index} style={{
                                display: 'flex',
                                alignItems: 'center',
                                fontSize: '12px'
                            }}>
                                <div style={{
                                    width: '12px',
                                    height: '12px',
                                    backgroundColor: label.color,
                                    marginRight: '5px',
                                    borderRadius: '50%'
                                }}></div>
                                <span>{label.name}</span>
                            </div>
                        ))}
                    </div>
                </div>

                {/* 视频类分析 */}
                <div style={{
                    backgroundColor: 'white',
                    padding: '20px',
                    borderRadius: '8px',
                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
                    textAlign: 'center'
                }}>
                    <h3>视频类分析</h3>
                    <ResponsiveContainer width="100%" height={200}>
                        <PieChart>
                            <Pie
                                data={contentTypeAnalysisData}
                                cx="50%"
                                cy="50%"
                                innerRadius={50}
                                outerRadius={70}
                                paddingAngle={2}
                                dataKey="value"
                                label={({ percent }) => `${((percent ?? 0) * 100).toFixed(0)}%`}
                            >
                                {contentTypeAnalysisData.map((_entry, index) => (
                                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                ))}
                            </Pie>
                            <Tooltip formatter={(value, name) => {
                                const displayName = contentTypeNameMap[name as keyof typeof contentTypeNameMap] || name;
                                return [`${value}%`, displayName];
                            }} />
                        </PieChart>
                    </ResponsiveContainer>
                    <div style={{
                        display: 'flex',
                        justifyContent: 'center',
                        marginTop: '10px',
                        gap: '15px'
                    }}>
                        {COLOR_LABELS.map((label, index) => (
                            <div key={index} style={{
                                display: 'flex',
                                alignItems: 'center',
                                fontSize: '12px'
                            }}>
                                <div style={{
                                    width: '12px',
                                    height: '12px',
                                    backgroundColor: label.color,
                                    marginRight: '5px',
                                    borderRadius: '50%'
                                }}></div>
                                <span>{label.name}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default About;